<template>
  <transition name="slide-up">
    <div class="playing" v-show="songItem.mid" @click="close">
      <div class="wrapper">
        <div class="playing-info">
          <img :src="img_src" alt="">
          <div class="title">
            <p class="name">歌曲：{{ songItem.name }}</p>
            <p class="username">
              <span v-for="item in songItem.singer" :key="item.id">{{ item.name }}</span>
            </p>
          </div>
        </div>
        <div class="options">
          <ul>
            <li @click="next()">
              <i class="icon-play"></i>
              <span>下一首播放</span>
            </li>
            <li @click="toggleFavorite(songItem)">
              <i :class="getFavoriteIcon(songItem)"></i>
              <span>添加到我喜欢</span>
            </li>
            <li  v-show="songItem.mv && songItem.mv.vid != ''" @click="toMV(songItem)">
              <i class="icon-play"></i>
              <span>MV</span>
            </li>
            <!-- <li @click="getComment(songItem)">
              <i class="icon-add"></i>
              <span>获取评论</span>
            </li> -->
          </ul>
        </div>
      </div>
      <div class="close" @click="close">
        关闭
      </div>
    </div>
  </transition>
</template>

<script>
import { mapState, mapMutations } from 'vuex'
import { playerMixin } from '../../common/js/mixin'

export default {
  mixins: [playerMixin],
  methods: {
    ...mapMutations(['setSongItem', 'setPlayList', 'setSequenceList', 'setCurrentIndex']),
    close () {
      this.setSongItem({})
    },
    next () {
      if (this.currentIndex === -1) {
        // 列表空
        this.playList.push(this.songItem)
      } else {
        // 不为空
        // 检查是否在原列表中
        let index = this.playList.findIndex((item) => {
          return item.mid === this.songItem.mid
        })
        if (index > -1) {
          // 当前歌曲存在于原列表  先删除
          this.playList.splice(index, 1)
        }
        this.playList.splice(this.currentIndex + 1, 0, this.songItem)
      }
      this.setPlayList(this.playList)
      this.setSequenceList(this.playList)
      if (this.playList.length === 1) {
        // 之前没有没有歌曲
        // 传递 当前播放歌曲索引
        this.setCurrentIndex(0)
      }
    },
    toMV (item) {
      this.$router.push('/mv/' + item.mv.vid)
      this.close()
    }
    // getComment (item) {
    //   this.close()
    //   const id = item.id === undefined ? item.songid : item.id
    //   this.$router.push('/comment/' + id)
    // }
  },
  computed: {
    ...mapState(['songItem', 'playList', 'sequenceList']),
    img_src () {
      return JSON.stringify(this.songItem) === '{}' ? '' : `https://y.gtimg.cn/music/photo_new/T002R300x300M000${this.songItem.album.mid}.jpg`
    }
  }
}
</script>

<style lang="stylus" scoped>
@import '../../common/stylus/variable.styl'
.slide-up-enter-active, .slide-up-leave-active {
  opacity:1;
  transition: all .5s;
}
.slide-up-enter, .slide-up-leave-to {
  opacity: 0;
  transform: translateY(100%);
}
.playing {
  position: fixed;
  top:0;
  left:0;
  right:0;
  bottom: 0;
  z-index 40;
  background-color $color-background-d;
  .wrapper {
    position: absolute;
    left:0;
    bottom: 49px;
    // height: 400px;  不用高度效果更好些
    width: 100%;
    padding: 20px 20px 0;
    background-color $color-highlight-background;
    box-sizing: border-box;
    border-radius: 20px 20px 0 0;
    .playing-info {
      display: flex;
      img {
        width: 50px;
        height: 50px;
      }
      .title {
        margin-left: 20px;
        display: flex;
        flex-direction: column;
        justify-content: space-around;
        .name {
          color: $color-text-ll;
        }
        .username {
          color: $color-text-d;
          span {
            padding-right:4px;
          }
        }
      }
    }
    .options {
      padding-top: 20px;
      ul {
        li {
          width: 100%;
          height: 40px;
          i {
            color: $color-theme;
          }
          .icon-favorite {
            color: $color-sub-theme;
          }
          span {
            margin-left: 20px;
            color: $color-text-d;
          }
        }
      }
    }
  }
  .close {
    position: fixed;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 50px;
    line-height: 50px;
    text-align:center;
    background-color: $color-background;
  }
}
</style>
